<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
//函数声明
/*
1:说一下对变量提升的理解
    变量定义
    函数声明和函数表达式
2:说明this几种不同的使用场景

3:创建10个<a>标签,并弹出对应的序号
4:如何理解作用域
5:实际开发中闭包的作用
执行上下文
this
作用域
作用域链
闭包
1:执行上下文
    范围:一段<script>或者一个函数
    全局:变量定义,函数声明
    函数:变量定义,函数声明,this,arguments
2:this
    ## 在执行时才能确认值,定义时无法确认
    作为构造函数执行
    作为对象属性执行
    作为普通函数执行  window
    call apply bind 改变this的指向
3:作用域
    没有块级作用域,只有函数和全局作用域
    自由变量:当前作用域中没有定义的变量(不管执行在什么地方),即自由变量
    一个函数的作用域是它定义的时候的作用域,而不是执行的时候的作用域
    作用域链,即自由变量的查找
4:闭包的使用场景
    函数作为返回值
    函数作为参数传递
5:闭包的实际应用   
    封装变量,收敛权限

function fn(name){
    age = 20
    console.log(name,age)
    var age
}
fn('张')

var a = {
    name:'A',
    fn2:function(){
        console.log(this)
    }
}
a.fn2.call({name:'B'})
var fn3 = a.fn2
fn3()
//函数表达式
var fn1 = function(){

}

function F1(){
    var a = 100;
    return function(){
        console.log(a) //自由变量,父作用域中去寻找
    }
}
var f1 = F1();
// var a = 200;
// f1()

function F2(fn){
    var a = 400;
    fn();
}
F2(f1)

var i;
for(i = 0;i<10;i++){
    (function(i){
        var a = document.createElement('a')
        a.innerHTML = i + '<br>'
        a.addEventListener('click',function(e){
            e.preventDefault();
            alert(i) // 自由变量,要去父作用域获取值
        })
        document.body.appendChild(a)
    })(i)
}
*/

function isFirstLoad() {
    var _list = []; //私有变量,默认加下划线
    return function(id){
        if(_list.indexOf(id) >= 0){
            return false;
        }else {
            _list.push(id)
            return true
        }
    }
}
/*
* 网址:http://www.jianshu.com/p/21a16d44f150
* 作用域与执行上下文是完全不同的两个概念.
    JavaScript代码的整个执行过程，分为两个阶段，代码编译阶段与代码执行阶段。编译阶段由编译器完成，将代码翻译成可执行代码，这个阶段作用域规则会确定。执行阶段由引擎完成，主要任务是执行可执行代码，执行上下文在这个阶段创建。
* 作用域指的是一套规则,作用域链指的是这套规则的具体实现
*/
var timer = setTimeout(function() {
    console.log('setTimeout actions.');
}, 0);

console.log('other actions.');
/*
var num = 10;
var func1 = function() {
    var num = 20;
    var func2 = function() {
        var num = 30;
        alert(num);
    };
    func2();
};
var func2 = function() {
    var num = 20;
    var func3 = function() {
        alert(num);
    };
    func3();
};
func1();
func2();
*/
</script>
</body>
</html>